interface PerformanceMetrics {
  fcp: number;  // First Contentful Paint
  lcp: number;  // Largest Contentful Paint
  fid: number;  // First Input Delay
  cls: number;  // Cumulative Layout Shift
}

export const initPerformanceMonitor = () => {
  if (typeof window === 'undefined') return;

  const metrics: Partial<PerformanceMetrics> = {};

  // FCP
  new PerformanceObserver((entryList) => {
    const entries = entryList.getEntries();
    if (entries.length > 0) {
      metrics.fcp = entries[0].startTime;
      console.log('FCP:', metrics.fcp);
    }
  }).observe({ entryTypes: ['paint'] });

  // LCP
  new PerformanceObserver((entryList) => {
    const entries = entryList.getEntries();
    if (entries.length > 0) {
      metrics.lcp = entries[entries.length - 1].startTime;
      console.log('LCP:', metrics.lcp);
    }
  }).observe({ entryTypes: ['largest-contentful-paint'] });

  // FID
  new PerformanceObserver((entryList) => {
    const entries = entryList.getEntries();
    if (entries.length > 0) {
      metrics.fid = entries[0].processingStart - entries[0].startTime;
      console.log('FID:', metrics.fid);
    }
  }).observe({ entryTypes: ['first-input'] });

  // CLS
  new PerformanceObserver((entryList) => {
    let clsValue = 0;
    for (const entry of entryList.getEntries()) {
      if (!entry.hadRecentInput) {
        clsValue += (entry as any).value;
      }
    }
    metrics.cls = clsValue;
    console.log('CLS:', metrics.cls);
  }).observe({ entryTypes: ['layout-shift'] });
};